Skip to content

Birmingham | ITP-Jan | Roman Sanaye | Sprint 3 | Quote Generator App#1049

Open
RomanSanaye wants to merge 2 commits intoCodeYourFuture:mainfrom
RomanSanaye:quote-generator
Open

Birmingham | ITP-Jan | Roman Sanaye | Sprint 3 | Quote Generator App#1049
RomanSanaye wants to merge 2 commits intoCodeYourFuture:mainfrom
RomanSanaye:quote-generator

Conversation

@RomanSanaye
Copy link
Copy Markdown

Learners, PR Template

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

This PR includes the implementation of the Quote Generator App for Sprint 3.

The application fetches and displays random quotes. It demonstrates working with APIs, DOM manipulation, and JavaScript event handling.

Questions

No questions at this time.

@RomanSanaye RomanSanaye added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Mar 19, 2026
Comment on lines +513 to +524
let autoplayInterval = null;
autoplayCheckbox.addEventListener("change", () => {
if (autoplayCheckbox.checked) {
autoplayInterval = setInterval(pickFromArray, 5000);
autoplayStatus.textContent = "Auto-play: ON";
autoplayStatus.style.color = "#4CAF50";
} else {
clearInterval(autoplayInterval);
autoplayInterval = null;
autoplayStatus.textContent = "Auto-play: OFF";
autoplayStatus.style.color = "brown";
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better to separate the function definition from the code that assigns event listener:

function setupQuoteApp() {
  ... 
  // Note: 
  // Variable/constant declarations + function definition can also be placed
  // in the outer scope or in a separate scope.
  let autoplayInterval = null;
  function toggleAutoPlay() {
      if (autoplayCheckbox.checked) {
        autoplayInterval = setInterval(pickFromArray, 5000);
        autoplayStatus.textContent = "Auto-play: ON";
        autoplayStatus.style.color = "#4CAF50";
      } else {
        clearInterval(autoplayInterval);
        autoplayInterval = null;
        autoplayStatus.textContent = "Auto-play: OFF";
        autoplayStatus.style.color = "brown";
      }
  }

  // Code that runs when the page loads -- easier to read
  autoplayCheckbox.addEventListener("change", toggleAutoPlay);
  button.addEventListener("click", pickFromArray);

  pickFromArray();
}

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

function definitions are kept separate, and event listeners are only assigned inside setupQuoteApp for better structure and readability.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see this change yet.

Well, you can practice this in other apps.

@cjyuan cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Mar 30, 2026
@RomanSanaye RomanSanaye added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Mar 30, 2026
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look good.

Comment on lines +529 to +550
autoplayCheckbox.addEventListener("change", () => {
if (autoplayCheckbox.checked) {
// Start auto-changing quotes every 5 seconds
autoplayInterval = setInterval(handleNewQuote, 5000);
autoplayStatus.textContent = "ON";

// Apply ON styling via CSS class
autoplayStatus.classList.add("autoplay-on");
autoplayStatus.classList.remove("autoplay-off");
} else {
// Stop auto-changing quotes
clearInterval(autoplayInterval);
autoplayInterval = null;

autoplayStatus.textContent = "OFF";

// Apply OFF styling via CSS class
autoplayStatus.classList.add("autoplay-off");
autoplayStatus.classList.remove("autoplay-on");
}
});
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For your reference:
https://chatgpt.com/share/69cae7dd-695c-8331-bb13-1ff731f13143

Suggestion made by ChatGPT how else you could implement this.

Note: I don't know how long ChatGPT will keep this chat available.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’ll try to use more CSS and reduce JavaScript in my projects and coursework. Whenever CSS can handle a feature, I won’t rely on JavaScript for it. Pseudo-elements like ::before and ::after are really powerful and useful for this approach. Thanks for the feedback and guidance.

@cjyuan cjyuan added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Reviewed Volunteer to add when completing a review with trainee action still to take. labels Mar 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Complete Volunteer to add when work is complete and all review comments have been addressed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants